<template>
  <el-card class = "box-card">
    Welcome
    <!--<Index/>-->
  </el-card>
  <div style = "height: 75px"/>
</template>

<script>
import * as echarts from "echarts";
import {getRequest} from "../api/star_horse";
import {common} from "../api/common";
import Index from "@/components/Index.vue";

export default {
  name: "Home",
  components: {Index},
  mixins: [common],
  setup() {

  },
  data() {
    const barChartUrl = "/doov-exh/exh/exceptionbill/barChart/";
    const lineChartUrl = "/doov-exh/exh/exceptionbill/lineChart/";
    return {
      customerCodes: [],
      barChart: null,
      lineChart: null,
      customerCode: 1,
      barChartUrl,
      lineChartUrl
    }
  },
  methods: {
    vbs() {
      vbs();
    },
    getNewCustomerData(val) {
      let _this = this;
      getRequest(_this.barChartUrl + "/" + val).then(res => {
        let redata = res.data.data;
        if (redata) {
          _this.barChartOper(redata.depts, redata.datas);
        }
      })
    },
    init() {
      let _this = this;
      _this.barChart = echarts.init(document.getElementById('main1'));
      // _this.lineChart = echarts.init(document.getElementById('main2'));
      _this.commonSelectData("customer_code", function (data) {
        if (data) {
          data.forEach(item => {
            _this.customerCodes.push({name: item.statusName, value: parseInt(item.statusCode)});
          })
        }
      });
      _this.getNewCustomerData(_this.customerCode);
    },
    barChartOper(labelData, barData) {
      let _this = this;
      // 基于准备好的dom，初始化echarts实例

      // 指定图表的配置项和数据
      let option = {
        title: {
          text: '当月各部门异常工时柱状图'
        },
        tooltip: {},
        legend: {
          data: ['异常工时（小时）']
        },
        xAxis: {
          data: labelData
        },
        yAxis: {},
        series: [
          {
            name: '异常工时（小时）',
            type: 'bar',
            data: barData
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      _this.barChart.setOption(option);
    },
    lineChartOper(categoryData, seriesData) {
      let _this = this;
      let option = {
        title: {
          text: '当月各部门异常工时曲线图'
        },
        xAxis: {
          type: 'category',
          data: categoryData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: seriesData,
            type: 'line',
            smooth: true
          }
        ]
      };

      _this.lineChart.setOption(option);
    },
    chart3() {
      var chartDom = document.getElementById('main3');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          data: [
            'Direct',
            'Marketing',
            'Search Engine',
            'Email',
            'Union Ads',
            'Video Ads',
            'Baidu',
            'Google',
            'Bing',
            'Others'
          ]
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '30%'],
            label: {
              position: 'inner',
              fontSize: 14
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 1548, name: 'Search Engine'},
              {value: 775, name: 'Direct'},
              {value: 679, name: 'Marketing', selected: true}
            ]
          },
          {
            name: 'Access From',
            type: 'pie',
            radius: ['45%', '60%'],
            labelLine: {
              length: 30
            },
            label: {
              formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
              backgroundColor: '#F6F8FC',
              borderColor: '#8C8D8E',
              borderWidth: 1,
              borderRadius: 4,
              rich: {
                a: {
                  color: '#6E7079',
                  lineHeight: 22,
                  align: 'center'
                },
                hr: {
                  borderColor: '#8C8D8E',
                  width: '100%',
                  borderWidth: 1,
                  height: 0
                },
                b: {
                  color: '#4C5058',
                  fontSize: 14,
                  fontWeight: 'bold',
                  lineHeight: 33
                },
                per: {
                  color: '#fff',
                  backgroundColor: '#4C5058',
                  padding: [3, 4],
                  borderRadius: 4
                }
              }
            },
            data: [
              {value: 1048, name: 'Baidu'},
              {value: 335, name: 'Direct'},
              {value: 310, name: 'Email'},
              {value: 251, name: 'Google'},
              {value: 234, name: 'Union Ads'},
              {value: 147, name: 'Bing'},
              {value: 135, name: 'Video Ads'},
              {value: 102, name: 'Others'}
            ]
          }
        ]
      };

      option && myChart.setOption(option);
    },
    chart4() {

    }
  },
  created() {

  },
  mounted() {
    // this.init();
    // this.chart1();
    // this.chart2();
    // this.chart3();
    // this.chart4();
  }
}
</script>

<style scoped>

</style>